<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
    .clock{
        width: 30rem;
        height: 30rem;
        border:20px solid black;
        border-radius: 50%;
        margin:50px auto;
        position: relative;
        padding: 2rem;
        box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        0 0 20px 1px rgba(255,0,0,1),
        inset 0 0 0 3px #efefef,
        inset 0 0 10px black;

    }
    .clock-face{
        position: relative;
        height: 100%;
        width: 100%;
        transform: translateY(-3px);
    }
    .hand{
        width: 50%;
        height:6px;
        background: black;
        position: absolute;
        top:50%;
        transform: rotateZ(90deg);
        transform-origin: 100%;
        transition: all 0.5s;
        transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);;

    }
</style>
<div class="clock">
    <div class="clock-face">
        <div class="hand hour-hand"></div>
        <div class="hand min-hand"></div>
        <div class="hand second-hand"></div>
    </div>
</div>
<script>
    const secondHand= document.querySelector('.second-hand')
    const hourHand= document.querySelector('.hour-hand')
    const minHand= document.querySelector('.min-hand');

    function setDate(){

        const now=new Date()
        console.log(now);
        let seconds= now.getSeconds();
        const secondsDegrees=((seconds/60)*360)+90;
        secondHand.style.transform=`rotate(${secondsDegrees}deg)`

        const mins= now.getMinutes();
        const minsDegrees = ((mins/60*360)+(seconds/60)*6)+90;
        minHand.style.transform=`rotate(${minsDegrees}deg)`

        const hour= now.getMinutes();
        const hourDegrees = ((hour/12*360)+(mins/60)*30)+90;
        hourHand.style.transform=`rotate(${hourDegrees}deg)`

    }
    setInterval(setDate,1000)
    setDate()



</script>
</body>
</html>